<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>我的好友</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/myFriends.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="backBox" onclick="javascript:history.back(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </div>
    <div class="topTitle ">
        我的好友</div>
    <!-- 顶部导航 -->
    <div class="topNav">
        <div class="navBox  whole checked">
            <div>
                A组</div>
            <div class="line lineAll">
            </div>
        </div>
        <div class="navBox">
            <div>
                B组</div>
            <div class="line">
            </div>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>
                    序号
                </th>
                <th>
                    编号
                </th>
                <th>
                    姓名
                </th>
                <th>
                    注册时间
                </th>
            </tr>
        </thead>
        <tbody id="friends">
        </tbody>
    </table>
    <div class="loaded">
        已加载全部数据</div>
</body>
<script>
    $(document).ready(function () {
                 $.ajax({
                    type: "post",
                    url: "../../BaseRefWeb.aspx?stype=ISpMemberFun&method=GetUserDownPerson&type=sp",
                    success: function (result) {
                        var data = JSON.parse(result);
                        if (data.success == false) {
                            if (data.msg == "_timeout") {
                                $('.phoneError').text("请重新登陆");
                                var top = ($(window).height() - $('.phoneError').height()) / 2;
                                var left = ($(window).width() - $('.phoneError').width()) / 2;
                                var scrollTop = $(document).scrollTop();
                                var scrollLeft = $(document).scrollLeft();
                                $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                                setTimeout(function () {
                                    $('.phoneError').hide();
                                    window.location.href = "../UserLogin/Login.html";
                                }, 1000)
                            }
                        }
                        else {
                           var html='';
                           for (var i = 0; i < data.length; i++) {
                                if(data[i].NUM=="一级")
                                {
                                    var num = i+1;
                                    html+='<tr><th scope="row">'+num+'</th>';
                                    html+='<td>'+data[i].TB_NUMBER+'</td><td>'+data[i].TB_USERNAME+'</td><td>'+data[i].TB_ADDTIME+'</td></tr>';
                                }
                            }
                            $("#friends").append(html);
                            $('.topNav').on('click', '.navBox', function() {
                                $("#friends").html("");
                                const $this = $(this)
                                const index = $this.index()
                                if($this[0].innerText.replace(/[\r\n]/g,"")=="A组")
                                {
                                    $this.addClass('checked').siblings().removeClass('checked')
                                    $(".line").removeClass('lineAll')
                                    $this.children('.line').addClass('lineAll')
                                    var htmls= "";
                                    var indexss=0;
                                    for (var i = 0; i < data.length; i++) {
                                        if(data[i].NUM=="一级")
                                        {
                                            var num = indexss+1;
                                            htmls+='<tr><th scope="row">'+num+'</th>';
                                            htmls+='<td>'+data[i].TB_NUMBER+'</td><td>'+data[i].TB_USERNAME+'</td><td>'+data[i].TB_ADDTIME+'</td></tr>';
                                            indexss++;
                                        }
                                      }
                                     $("#friends").append(htmls);
                                }
                                else
                                {
                                    $this.addClass('checked').siblings().removeClass('checked')
                                    $(".line").removeClass('lineAll')
                                    $this.children('.line').addClass('lineAll')
                                    var htmlss= "";
                                    var indexs=0;
                                    for (var i = 0; i < data.length; i++) {
                                        if(data[i].NUM=="二级")
                                        {

                                            var num = indexs+1;
                                            htmlss+='<tr><th scope="row">'+num+'</th>';
                                            htmlss+='<td>'+data[i].TB_NUMBER+'</td><td>'+data[i].TB_USERNAME+'</td><td>'+data[i].TB_ADDTIME+'</td></tr>';
                                            indexs++;
                                        }
                                      }
                                     $("#friends").append(htmlss);
                                }
                            })
                        }
                    }
                });
        
    })
</script>
</html>
